<template>
    <div class="chartBox">
        词云图
        <div ref="wordChartRef" :style="{ width: '500px', height: '500px' }"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud'; // 引入词云图插件

// 类型定义（可选）
interface WordData {
    name: string;
    value: number;
}

const wordChartRef = ref<HTMLElement | null>(null);
let myChart: echarts.ECharts | null = null;

// 词云数据
const wordData: WordData[] = [
    { name: "无人驾驶", value: 352 },
    { name: "区块链", value: 214 },
    { name: "云计算", value: 534 },
    { name: "物联网", value: 134 },
    { name: "虚拟现实", value: 534 },
    { name: "增强现实", value: 542 },
    { name: "人工智能", value: 242 },
    { name: "机器学习", value: 42 },
    { name: "深度学习", value: 435 },
    { name: "自然语言处理", value: 124 },
    { name: "计算机视觉", value: 654 },
    { name: "神经网络", value: 232 },
    { name: "数据挖掘", value: 324 },
    { name: "语音识别", value: 453 },
    { name: "图像识别", value: 124 },
    { name: "聊天机器人", value: 453 },
    { name: "智能家居", value: 233 },
    { name: "人脸识别", value: 123 },
    { name: "量子计算", value: 212 },
    { name: "智能制造", value: 241 },
    { name: "语义分割", value: 414 },
    { name: "知识图谱", value: 564 },
    { name: "增量学习", value: 755 },
    { name: "多模态学习", value: 229 },
    { name: "迁移学习", value: 233 },
    { name: "生成对抗网络", value: 124 },
    { name: "强化学习", value: 65 },
    { name: "人机交互", value: 199 },
    { name: "机器人技术", value: 299 },
    { name: "智能音箱", value: 454 },
    { name: "智能医疗", value: 365 },
    { name: "异常检测", value: 360 },
    { name: "时间序列预测", value: 187 },
    { name: "推荐系统", value: 360 },
    { name: "情感分析", value: 460 },
    { name: "机器翻译", value: 480 },
    { name: "语音合成", value: 488 },
    { name: "人脸生成", value: 51 },
    { name: "图像风格转换", value: 99 },
    { name: "实例分割", value: 120 },
    { name: "目标检测", value: 150 },
];

// https://www.iconfont.cn/collections/detail?spm=a313x.collections_index.i1.d9df05512.4e263a81Mxu54u&cid=52557
let image = ""
var maskImage = new Image();
maskImage.src = image
// 初始化图表
const initEchart = () => {
    if (!wordChartRef.value) return;

    // 销毁旧实例（防止重复初始化）
    if (myChart) {
        myChart.dispose();
    }

    myChart = echarts.init(wordChartRef.value);

    const option: echarts.EChartsOption = {
        series: [
            {
                type: 'wordCloud',
                shape: 'circle',
                // keepAspect: false,
                //此处添加图片的base64格式
                maskImage: maskImage,
                left: 'center',
                top: 'center',
                width: '500px',
                height: '500px',
                sizeRange: [4, 20],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 2,
                drawOutOfBound: false,
                layoutAnimation: true,
                textStyle: {
                    fontWeight: 'bold',
                    color: () => {
                        return `rgb(${[
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                        ].join(',')})`;
                    },
                },
                emphasis: {
                    textStyle: {
                        textShadowBlur: 2,
                        textShadowColor: 'orange',
                    },
                },
                data: wordData,
            },
        ],
    };

    myChart.setOption(option);

    // 自动适配窗口大小
    const resizeHandler = () => {
        myChart?.resize();
    };
    window.addEventListener('resize', resizeHandler);

    // 在组件卸载前移除事件监听
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resizeHandler);
        myChart?.dispose();
        myChart = null;
    });
};

// 组件挂载后初始化图表
onMounted(() => {
    initEchart();
});
</script>

<style scoped>
.chartBox {
    width: 50%;
    height: 50vh;
}
</style>